<link rel='import' href='../../bower/polymer/polymer.html'>
<link rel='import' href='../../bower/core-icons/core-icons.html'>
<link rel='import' href='../../bower/core-collapse/core-collapse.html'>
<link rel='import' href='instance.html'>
<link rel='import' href='button.html'>

<polymer-element name='uproxy-contact' attributes='contact, isOnline, mode'>

  <template>
    <style>
    :host {
      box-sizing: border-box;
      margin: 0;
      z-index: 10;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }
    div:focus {
      outline: 0; /* disable blue focus outline around contact */
    }
    .frame {
      box-sizing: border-box;
      -webkit-transition: all 0.23s !important;
      -moz-transition: all 0.23s !important;
      transition: all 0.23s !important;
    }
    .nameRow {
      margin: 18px 24px 0px 24px;
    }
    .expandable {
      cursor: pointer;
    }
    .notExpandable {
      cursor: default;
    }
    .nameRow core-icon {
      opacity: 0.6;
      margin: 0px 1px;
    }
    .nameRow core-icon.expand {
      min-width: 25px;
    }
    .nameLine core-icon[icon=open-in-new] {
      width: 16px;
      height: 16px;
      padding-top: 8px; /* handle alignment to 24px */
    }
    .nameLine core-icon[icon=delete] {
      width: 20px;
    }
    .nameRow:hover core-icon.expand {
      opacity: 1;
    }
    uproxy-avatar {
      width: 40px;
      height: 40px;
      min-width: 40px;
      border: none;
      border-radius: 50%;
      background-color: #eee;
      vertical-align: middle;
      box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.12);
    }
    .name {
      white-space: nowrap;
      font-size: 15px;
      line-height: 22px;
      color: rgba(0,0,0,0.87);
      padding: 0px 18px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .offlineStatus {
      padding: 0px 18px;
      font-size: 12px;
      line-height: 16px;
    }
    .onlineStatus {
      padding: 0px 18px;
      font-size: 12px;
      line-height: 16px;
      /* Color should be consistent with offlineStatus, whose parent has opacity 0.5 */
      color: rgba(112, 112, 112, 0.5);
    }
    .accessIcon {
      width: 20px;
      min-width: 20px;
      height: 20px;
    }
    core-collapse {
      -webkit-margin-start: 16px;
      -moz-margin-start: 16px;
      margin-top: 5px;
      color: rgba(0,0,0,0.54);
    }
    .offline {
      opacity: 0.5;
    }
    uproxy-button {
      font-size: 1em;
      margin: 14px 5px 5px 2px;
      padding-left: 1em;
      padding-right: 1em;
    }
    core-icon[icon=query-builder],
    core-icon[icon=mail],
    core-icon[icon=check] {
      height: 16px !important;
      width: 16px !important;
      color: rgba(0,0,0,0.54);
      margin: 0px 4px 0px 0px;
    }
    core-icon[icon=check] {
      color: #12A391;
    }
    p.preButtonDetailedText {
      margin: 18px 0px 0px 0px;
      font-size: 12px;
      line-height: 20px;
    }
    p.preButtonText {
      margin: 0;
      font-size: 14px;
      line-height: 20px;
    }
    p.description {
      margin: 0;
      font-size: 13px;
      line-height: 20px;
      color: #333;
    }
    </style>

    <uproxy-state id="state"></uproxy-state>

    <div tabindex='-1'
        class='nameRow frame {{ (isOnline || contact.status!=UserStatus.FRIEND) ? "online" : "offline" }} {{ contact.status==UserStatus.REMOTE_INVITED_BY_LOCAL ? "notExpandable" : "expandable" }}'
        top horizontal layout>
      <uproxy-avatar src='{{ contact.imageData }}' network='{{ contact.network.name }}' showIcon='{{ model.onlineNetworks.length > 1 }}' on-tap='{{ toggle }}'></uproxy-avatar>
      <div flex>
        <div horizontal layout class='nameLine' on-tap='{{ toggle }}'>
          <div flex class='name'><bdi>{{ contact.name }}</bdi></div>
          <core-icon icon="open-in-new"
              hidden?="{{ !contact.url || (isGetter && !contact.getExpanded) || (isSharer && !contact.shareExpanded) }}"
              title="{{ contact.url }}" on-tap="{{ openLink }}"></core-icon>

          <core-icon icon="delete" hidden?='{{ contact.network.name !== "Cloud" }}' title="{{ contact.url }}" on-tap="{{ removeCloudFriend }}"></core-icon>

          <!-- TODO: Simplify show/hide logic of getting/sharing/expand/collapse icons. E.g. Angular allowed if/else-like logic to select what is displayed. -->
          <img src='../icons/getting_animated.gif' class='accessIcon'
              hidden?='{{ isSharer || !contact.isSharingWithMe }}'>
          <img src='../icons/sharing_animated.gif' class='accessIcon'
              hidden?='{{ isGetter || !contact.isGettingFromMe }}'>
          <!-- If you are sharing with or getting from a contact, the glowing sharing/getting icon will replace the expand/collapse chevron. -->
          <!-- Show expand chevron in only two cases: when contact is collapsed in GET mode and you're not getting from them OR when contact is collapsed in SHARE mode and you're not sharing with them. -->
          <core-icon icon="expand-more" class="expand"
            hidden?='{{ (!(isGetter && !contact.getExpanded && !contact.isSharingWithMe) && !(isSharer && !contact.shareExpanded && !contact.isGettingFromMe)) || contact.status == UserStatus.REMOTE_INVITED_BY_LOCAL }}'>
          </core-icon>
          <!-- Show collapse chevron in only two cases: when contact is expanded in GET mode and you're not getting from them OR when contact is expanded in SHARE mode and you're not sharing with them. -->
          <core-icon icon="expand-less" class="expand"
            hidden?='{{ !(isGetter && contact.getExpanded && !contact.isSharingWithMe) && !(isSharer && contact.shareExpanded && !contact.isGettingFromMe) }}'>
          </core-icon>
        </div>

        <div class='{{ (isOnline || contact.status!=UserStatus.FRIEND) ? "onlineStatus" : "offlineStatus" }}'
          hidden?="{{ hideOnlineStatus }}" on-tap='{{ toggle }}'>
          <span hidden?='{{contact.status==UserStatus.LOCAL_INVITED_BY_REMOTE || contact.status==UserStatus.REMOTE_INVITED_BY_LOCAL}}'>{{ (isOnline ? "ONLINE" : "OFFLINE") | $$(model.globalSettings.language) }}</span>
          <span hidden?='{{contact.status!=UserStatus.LOCAL_INVITED_BY_REMOTE}}'>{{ 'RESPOND_TO_FRIEND_REQUEST' | $$(model.globalSettings.language) }}</span>
          <span hidden?='{{contact.status!=UserStatus.REMOTE_INVITED_BY_LOCAL}}'>{{ 'FRIEND_REQUEST_SENT' | $$(model.globalSettings.language) }}</span>
        </div>

        <!-- beginning of getControls -->
        <core-collapse id='getControls' class='expandedControls'
          hidden?='{{isSharer}}'
          opened='{{ contact.getExpanded }}'>

          <div class='friendControls' hidden?='{{contact.status==UserStatus.LOCAL_INVITED_BY_REMOTE || contact.status==UserStatus.REMOTE_INVITED_BY_LOCAL}}'>
            <div id='getInstanceControls' hidden?='{{ contact.gettingConsentState != GettingConsentState.LOCAL_REQUESTED_REMOTE_GRANTED }}'>
              <div horizontal layout hidden?='{{ !hasInstance(ui.instanceTryingToGetAccessFrom) }}'>
                <core-icon icon='query-builder'></core-icon>
                <p class='preButtonText' flex>
                  {{ "TRYING_TO_CONNECT" | $$(model.globalSettings.language, { name: contact.name || contact.userId }) }}
                </p>
              </div>
              <template repeat='{{ instance in sortedInstances }}' vertical layout>
                <uproxy-instance
                    user='{{ contact }}'
                    instance='{{ instance }}'
                    on-instance-changed='{{ offeringInstancesChanged }}'>
                </uproxy-instance>
              </template>
              <!-- Cloud contacts are automatically set to LOCAL_REQUESTED_REMOTE_GRANTED, even
              though there may not be any known instances yet (when waiting for server to be created).  We just display "Offline" until the server creation is finished -->
              <span hidden?='{{sortedInstances.length > 0}}'>{{"OFFLINE" | $$(model.globalSettings.language)}}</span>
            </div>

            <div hidden?='{{ contact.gettingConsentState != GettingConsentState.LOCAL_REQUESTED_REMOTE_NO_ACTION }}'>
              <div horizontal layout>
                <core-icon icon='query-builder'></core-icon>
                <p class='preButtonText' flex>
                  {{ "ASKING_FOR_ACCESS" | $$(model.globalSettings.language) }}
                </p>
              </div>
              <p class='preButtonDetailedText'>{{ "WAITING_FOR_ACCESS" | $$({ name: contact.name }) }}</p>
              <uproxy-button class='grey' raised on-tap='{{ cancelRequest }}'>{{ "CANCEL_REQUEST" | $$(model.globalSettings.language) }}</uproxy-button>
            </div>

            <div hidden?='{{ contact.gettingConsentState != GettingConsentState.REMOTE_OFFERED_LOCAL_NO_ACTION }}'>
              <p class='preButtonText'>{{ "OFFERED_YOU_ACCESS" | $$(model.globalSettings.language) }}</p>
              <uproxy-button raised on-tap='{{ request }}'>{{ "ACCEPT_OFFER" | $$(model.globalSettings.language) }}</uproxy-button>
              <uproxy-button raised on-tap='{{ ignoreOffer }}'>{{ "IGNORE" | $$(model.globalSettings.language) }}</uproxy-button>
            </div>

            <div hidden?='{{ contact.gettingConsentState != GettingConsentState.REMOTE_OFFERED_LOCAL_IGNORED }}'>
              <p class='preButtonText'>{{ "OFFERED_YOU_ACCESS" | $$(model.globalSettings.language) }}</p>
              <uproxy-button class='grey' raised on-tap='{{ unignoreOffer }}'>{{ "STOP_IGNORING_OFFERS" | $$(model.globalSettings.language) }}</uproxy-button>
            </div>

            <div hidden?='{{ contact.gettingConsentState != GettingConsentState.NO_OFFER_OR_REQUEST }}'>
              <uproxy-button raised on-tap='{{ request }}'>
                {{ "ASK_FOR_ACCESS" | $$(model.globalSettings.language) }}
              </uproxy-button>
            </div>
          </div> <!-- end of controls for friends -->

          <div class='friendControls' hidden?='{{contact.status!=UserStatus.LOCAL_INVITED_BY_REMOTE}}'>
            <p class='preButtonText'>
              {{ "FRIEND_REQUEST" | $$(model.globalSettings.language, { name: contact.name }) }}
            </p>
            <uproxy-button raised on-tap='{{ acceptInvitation }}'>
              {{ "ACCEPT_INVITE" | $$(model.globalSettings.language) }}
            </uproxy-button>
          </div>
        </core-collapse> <!-- end of getControls -->

        <!-- beginning of shareControls -->
        <core-collapse id='shareControls' class='expandedControls'
          hidden?='{{isGetter}}'
          opened='{{ contact.shareExpanded }}'>

          <div class='friendControls' hidden?='{{contact.status!=UserStatus.FRIEND}}'>
            <div hidden?='{{ contact.sharingConsentState != SharingConsentState.LOCAL_OFFERED_REMOTE_ACCEPTED }}'>
              <uproxy-button class='grey' raised on-tap='{{ cancelOffer }}'>{{ "REVOKE_ACCESS" | $$(model.globalSettings.language) }}</uproxy-button>
            </div>

            <div hidden?='{{ contact.sharingConsentState != SharingConsentState.LOCAL_OFFERED_REMOTE_NO_ACTION }}'>
              <uproxy-button class='grey' raised on-tap='{{ cancelOffer }}'>{{ "CANCEL_OFFER" | $$(model.globalSettings.language) }}</uproxy-button>
            </div>

            <div hidden?='{{ contact.sharingConsentState != SharingConsentState.REMOTE_REQUESTED_LOCAL_NO_ACTION }}'>
              <div horizontal layout>
                <core-icon icon='mail'></core-icon>
                <p class='preButtonText' flex>
                  {{ "FRIEND_REQUESTS_ACCESS" | $$(model.globalSettings.language, { name: contact.name }) }}
                </p>
              </div>
              <uproxy-button raised on-tap='{{ offer }}'>{{ "GRANT" | $$(model.globalSettings.language) }}</uproxy-button>
              <uproxy-button raised on-tap='{{ ignoreRequest }}'>{{ "IGNORE" | $$(model.globalSettings.language) }}</uproxy-button>
            </div>

            <div hidden?='{{ contact.sharingConsentState != SharingConsentState.REMOTE_REQUESTED_LOCAL_IGNORED }}'>
              <p class='preButtonText'>{{ "FRIEND_REQUESTED_ACCESS" | $$(model.globalSettings.language) }}</p>
              <uproxy-button class='grey' raised on-tap='{{ unignoreRequest }}'>{{ "STOP_IGNORING_REQUESTS" | $$(model.globalSettings.language) }}</uproxy-button>
            </div>

            <div hidden?='{{ contact.sharingConsentState != SharingConsentState.NO_OFFER_OR_REQUEST }}'>
              <p class='preButtonText'>{{ "ACCESS_NOT_GRANTED" | $$(model.globalSettings.language) }}</p>
              <uproxy-button raised on-tap='{{ offer }}'>{{ "OFFER_ACCESS" | $$(model.globalSettings.language) }}</uproxy-button>
            </div>
          </div> <!-- end of controls for friends -->

          <div hidden?="{{contact.network.name!='Cloud'}}">
            <!-- Instances and descriptions are usually hidden from the Share tab because we have user-level sharing permissions. For Cloud, we should show the description as it also describes the user (since there is one instance per user). -->
            <p class='description'>{{ sortedInstances[0].description }}</p>
            <uproxy-button raised on-tap='{{ shareCloudFriend }}'>{{ "SHARE_WITH_A_FRIEND" | $$(model.globalSettings.language) }}</uproxy-button>
          </div>

          <div class='friendControls' hidden?='{{contact.status!=UserStatus.LOCAL_INVITED_BY_REMOTE}}'>
            <p class='preButtonText'>
              {{ "FRIEND_REQUEST" | $$(model.globalSettings.language, { name: contact.name }) }}
            </p>
            <uproxy-button raised on-tap='{{ acceptInvitation }}'>
              {{ "ACCEPT_INVITE" | $$(model.globalSettings.language) }}
            </uproxy-button>
          </div>
        </core-collapse> <!-- end of shareControls -->
      </div>

    </div> <!-- end of #nameRow -->

  </template>

  <script src='contact.js'></script>

</polymer-element>
